<template>
	<view class="open-account">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="list">
			<view class="item" @click="pageRoute('/servePages/open-account/detail?id=' + item.id)"
				v-for="(item,index) in list" :key="index">
				<view class="thnum">
					<image :src="$imageUrl(item.img)"></image>
				</view>
				<view class="info">
					<view class="tit">店铺名称：{{item.store.store_name}}</view>
					<view class="tit">活动名称：{{item.title}}</view>
					<view class="desc">{{item.remark}}</view>
				</view>
			</view>

			<view class="empty-data" v-if="list.length==0">暂无活动</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		reactive,
		toRefs,
		inject,
		ref,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '开户奖',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		article_id: 0,
		isMore: true,
		list: [],
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
			state.article_id = opt.id;
		}
		getDataList();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
		state.isMore = true;
		state.list = [];
		getDataList();
	})

	onReachBottom(() => {
		console.log('触底加载更多');
		getDataList()
	})

	function getDataList() {
		/* request.get('merchant.marketing/getActivityList').then(res => {
			console.log('开户奖活动', res);
			state.isMore = res.data.is_more;
			if (state.list.length == 0) {
				state.list = res.data.list;
			} else {
				state.list = state.list.concat(res.data.list);
			}
		}) */
		state.list = [{
			id: 1,
			title: '开户奖活动一',
			img: '',
			remark: '开户奖活动一开户奖活动一',
			store: {
				store_name: '云海水站'
			}
		}];
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		article_id,
		isMore,
		list,
	} = toRefs(state);
</script>

<style lang="scss">
	.open-account {
		padding-bottom: calc(env(safe-area-inset-bottom));
		margin: 0rpx 0 24rpx 0;

		.list {
			background: #fff;
			border-radius: 12rpx;
			padding: 24rpx;

			.item {
				margin: 0 0 24rpx 0;
				padding: 0 0 24rpx 0;
				border-bottom: #f7f7fb solid 1rpx;

				&:nth-last-child(1) {
					margin-bottom: 0;
					padding-bottom: 0;
					border: none;
				}

				.thnum {
					width: 100%;
					height: 220rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}

				.info {
					.tit {
						line-height: 60rpx;
						font-size: 30rpx;
						color: #222a52;
						font-weight: 600;
					}

					.desc {
						font-size: 24rpx;
						color: #7c859c;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;
						word-wrap: break-word;
					}
				}
			}

			.empty-data {
				margin-bottom: $m24;
				padding: $m24;
				background-color: #fff;
				border-radius: $radius-16;
				text-align: center;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>